<script setup>
import { getPriceList, packageInfo } from '@/apis/pay';
import { useI18nStore } from '@/stores/index';
const i18nStore = useI18nStore();
const show = ref(true);
const CurrentPaymentid = ref('');
const paymentMethod = ref('');
const price = ref('');
const qrcode = ref('');
const payList = ref([]);
const setpaymentMethod = async (method) => {
  paymentMethod.value = method;
  const res = await packageInfo({
    price_id: CurrentPaymentid.value,
    type: method
  });
  qrcode.value = res.data.code_url;
};
const setCurrentPaymentid = (id) => {
  CurrentPaymentid.value = id;
  price.value = payList.value.find((item) => item.price_id === id).price;
  closeData();
};
const closeData = () => {
  qrcode.value = '';
  paymentMethod.value = '';
};
const prop = defineProps({
  type: {
    type: String
  }
});
onMounted(async () => {
  const result = await getPriceList({ type: prop.type });
  payList.value = result.data;
  setCurrentPaymentid(result.data[0].price_id);
});
const paragraphList = computed(() => {
  switch (prop.type) {
    case '1':
      return ['16', '17', '18', '19'];
    case '2':
      return ['6', '7', '8', '9', '10'];
    case '3':
      return ['1', '2', '3', '4', '5'];
    case '4':
      return ['11', '12', '13', '14', '15'];
    default:
      return [];
  }
});
</script>

<template>
  <div
    v-if="show"
    class="fixed top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4 w-full pc:w-3/5 px-5 py-5 z-50 border rounded-2xl bg-white mobile:min-h-full dark:bg-dark-background dark:text-white"
  >
    <div class="flex flex-row-reverse justify-between">
      <i
        :class="`pi pi-times-circle text-xl cursor-pointer`"
        @click="show = false"
      />
    </div>
    <div>
      <div class="mb-[20px]">
        <div class="title mb-[20px]">
          {{ i18nStore.translate('choose_file_size') }}
        </div>
        <div class="overflow-x-auto">
          <ul class="flex flex-nowrap">
            <li
              class="flex-shrink-0 w-[200px] h-[200px] border flex flex-col items-center justify-evenly mx-3"
              :key="item.id"
              v-for="item in payList"
              :class="{
                'border-[#5CD6C8]': CurrentPaymentid === item.price_id
              }"
              @click="setCurrentPaymentid(item.price_id)"
            >
              <h3 class="text-[24px] border-b-[1px] pb-[10px]">
                {{ i18nStore.translate('upgrade_vip') }}
              </h3>
              <div class="text-center">
                <p class="text-[24px] text-[#5CD6C8] font-bold">
                  {{ item.description }}
                </p>
                <p class="text-[14px] text-[#666]">
                  {{ i18nStore.translate('file_speed_unlimited_transfer') }}
                </p>
                <p
                  class="text-[14px] text-[#666]"
                  v-if="CurrentPaymentid === item.price_id"
                >
                  {{ i18nStore.translate('Single_file_size') }}
                </p>
                <p
                  class="text-[14px] text-[#666]"
                  v-if="CurrentPaymentid === item.price_id"
                >
                  {{ item.description }}{{ i18nStore.translate('file_up_to') }}
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div v-if="paragraphList.length">
        <h1 class="font-bold text-[24px] mb-2">
          {{ i18nStore.translate('buy_tips') }}
        </h1>
        <p v-for="(item, index) in paragraphList" :key="item">
          {{ index + 1 }}：{{ i18nStore.translate(`costumbre${item}`) }}
        </p>
      </div>
      <div class="mb-[20px]">
        <div class="title mb-[10px]">
          {{ i18nStore.translate('total_amount') }}
        </div>
        <div>
          <p class="font-bold text-[24px]">￥{{ price }}</p>
        </div>
      </div>
      <div>
        <div class="title mb-[10px]">
          {{ i18nStore.translate('choose_payment_method') }}
        </div>
        <ul class="flex flex-wrap justify-left mb-[10px]">
          <li
            class="w-[120px] h-[50px] border flex flex-col items-center justify-evenly mr-[20px]"
            :class="paymentMethod == '1' ? 'border-[#5CD6C8]' : ''"
            @click="setpaymentMethod('1')"
          >
            <div>{{ i18nStore.translate('alipay') }}</div>
          </li>
          <li
            class="w-[120px] h-[50px] border flex flex-col items-center justify-evenly"
            :class="paymentMethod == '2' ? 'border-[#5CD6C8]' : ''"
            @click="setpaymentMethod('2')"
          >
            <div>{{ i18nStore.translate('wechat') }}</div>
          </li>
        </ul>
        <div class="w-[120px] h-[120px]" v-if="qrcode">
          <Qrcode :value="qrcode" />
        </div>
      </div>
    </div>
  </div>
</template>
